<template>
	<view class="wrapper">
		<view class="header">
			<view class="action">
				<view class="left">
					<view class="action-li">
						<image src="../../static/index/index/action1.png"></image>
					</view>
				</view>
				<view class="center"  @click="jumpNavigateTo('/pages/index/sousuo')">
					<uni-search-bar @confirm="search" @input="input" cancelButton="none" placeholder="搜索股票名称/代码/简拼"></uni-search-bar>
				</view>
				<view class="right">
					<view class="action-li">
						<image src="../../static/index/index/action2.png"></image>
					</view>
					<view class="action-li">
						<image src="../../static/index/index/action3.png"></image>
					</view>
				</view>
			</view>
			<view class="model">
				<view class="model-li" @click="jumpNavigateTo('/pages/index/kaihu')">
					<image src="../../static/index/index/model1.png"></image>
					<view class="name">极速开户</view>
				</view>
				<view class="model-li"  @click="jumpNavigateTo('/pages/user/mysetting')">
					<image src="../../static/index/index/model2.png"></image>
					<view class="name">业务办理</view>
				</view>
				<view class="model-li">
					<image src="../../static/index/index/model3.png"></image>
					<view class="name">一键打新</view>
				</view>
				<view class="model-li"  @tap="jumpNavigateTo('/pages/trade/blocktradinglist')">
					<image src="../../static/index/index/model4.png"></image>
					<view class="name">大宗交易</view>
				</view>
				<view class="model-li" @tap="jumpNavigateTo('/pages/index/panorama')">
					<image src="../../static/index/index/model5.png"></image>
					<view class="name">全景资产</view>
				</view>
				<view class="model-li"  @tap="jumpNavigateToa('/pages/analysis/analysis')">
					<image src="../../static/index/index/model6.png"></image>
					<view class="name">行情</view>
				</view>
				<view class="model-li"  @tap="jumpNavigateTo('/pages/index/yinhangzhuanzheng')">
					<image src="../../static/index/index/model7.png"></image>
					<view class="name">银行转证</view>
				</view>
				<view class="model-li">
					<image src="../../static/index/index/model8.png"></image>
					<view class="name">三方存管</view>
				</view>
			</view>
		</view>
		<!-- <view class="exponent"  @tap="jumpNavigateTo('/pages/index/securitiesdetails')"> -->
		<view class="exponent">
			<view class="exponent-info">
				<view class="topinfo">
					<view class="left">上证指数</view>
					<view class="right">
						<view class="num">2830.53 -1.83%</view>
						<view class="icon"></view>
					</view>
				</view>
				<view class="centerinfo">
					<progress percent="30" activeColor="#EA0E00" backgroundColor="#2A9321" border-radius="7" stroke-width="15" />
				</view>
				<view class="bottominfo">
					<view class="left redtext">涨313/涨停25</view>
					<view class="right greentext">跌5007/跌停87</view>
				</view>
			</view>
			<view class="exponentinformation"   @tap="jumpNavigateTo('/pages/index/indexdetails')">
				<view class="info left">
					<view class="title">
						<image src="../../static/index/index/info1.png"></image>
						<view class="name">深度分析</view>
					</view>
					<view class="titleinfo">盘后说市：创业板指跌 幅扩大</view>
					<view class="otherinfo">2小时前 316阅读</view>
				</view>
				<view class="info right">
					<view class="title">
						<image src="../../static/index/index/info2.png"></image>
						<view class="name">时事热点</view>
					</view>
					<view class="titleinfo">地方两会透露国企改革 新线索</view>
					<view class="otherinfo">国企改革</view>
				</view>
			</view>
		</view>
		<view class="information" >
			<view class="title" @tap="jumpNavigateTo('/pages/other/notice')">
				<view class="left">智信头条</view>
				<view class="right">更多资讯 <uni-icons type="right" size="16" color="#999999"></uni-icons></view>
			</view>
			<view class="list"  @tap="jumpNavigateTo('/pages/index/indexdetails')">
				<view class="new">
					<view class="index">1</view>
					<view class="title">中国科技：2023年度净利润预盈利4000万元到4利4000万元到4</view>
				</view>
				<view class="new">
					<view class="index">2</view>
					<view class="title">中国科技：2023年度净利润预盈利4000万元到4...</view>
				</view>
				<view class="new">
					<view class="index">3</view>
					<view class="title">中国科技：2023年度净利润预盈利4000万元到4...</view>
				</view>
				<view class="new">
					<view class="index">4</view>
					<view class="title">中国科技：2023年度净利润预盈利4000万元到4...</view>
				</view>
				<view class="new">
					<view class="index">5</view>
					<view class="title">中国科技：2023年度净利润预盈利4000万元到4...</view>
				</view>
				<view class="new">
					<view class="index">6</view>
					<view class="title">中国科技：2023年度净利润预盈利4000万元到4...</view>
				</view>
			</view>
		</view>
		<view class="empty"></view>
		<view class="search" style="display: none;">
			<view class="action">
				<view class="left">
					<view class="action-li">
						<uni-icons type="left" size="25" color="#000" ></uni-icons>
					</view>
				</view>
				<view class="center">
					<uni-search-bar @confirm="search" @input="input" placeholder="搜索股票名称/代码/简拼"></uni-search-bar>
				</view>
			</view>
			<view class="resultlist">
				<view class="result">
					<view class="left">
						<view class="label">深A</view>
						<view class="info">
							<view class="title">东旭蓝天</view>
							<view class="subtitle">00040</view>
						</view>
					</view>
					<view class="right">
						<uni-icons type="plus" size="25" color="#000" ></uni-icons>
					</view>
				</view>
				<view class="result">
					<view class="left">
						<view class="label">深A</view>
						<view class="info">
							<view class="title">东旭蓝天</view>
							<view class="subtitle">00040</view>
						</view>
					</view>
					<view class="right">
						<uni-icons type="minus" size="25" color="#000" ></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
	
		},
		methods: {
			jumpNavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			jumpNavigateToa(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #F6F4F9;
	}
	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}
	.header{
		padding: 60rpx 33rpx 22rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		
		.action{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 18rpx;
			
			.left{
				margin-right: 15rpx;
				image{
					width: 57rpx;
					height: 57rpx;
				}
			}
			
			.center{
				width: 487rpx;
				height: 59rpx;
				text-align: center;
				position: relative;
				top: -10rpx;
				.uni-searchbar{
					padding: 0;
				}
			}
			
			.right{
				display: flex;
				justify-content: flex-end;
				.action-li{
					margin-left:  24rpx;
				}
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.model{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			padding: 36rpx 0 0;
			
			.model-li{
				width: 25%;
				text-align: center;
				margin-bottom: 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #262626;
				
				image{
					width: 80rpx;
					height: 80rpx;
					
				}
			}
		}
	}
	.exponent{
		padding: 22rpx 33rpx 22rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		.exponent-info{
			.topinfo{
				display: flex;
				justify-content: space-between;
				.left{
					font-weight: bold;
					font-size: 32rpx;
					color: #262626;
				}
				.right{
					display: flex;
					justify-content: space-between;
					.num{
						font-weight: 500;
						font-size: 26rpx;
						color: #2A9321;
						margin-right: 24rpx;
					}
					.icon{
						width: 64rpx;
						height: 35rpx;
						background: #F6F6F6;
						border-radius: 18rpx;
						position: relative;
					}
					.icon::after{
						content: '';
						position: absolute;
						left: 20rpx;
						top: 10rpx;
						width: 0;
						height: 0;
						border-left: 5px solid transparent;
						border-right: 5px solid transparent;
						border-bottom: 7px solid #666666;
					}
					
				}
			}
			.centerinfo{
				border-radius: 15rpx !important;
				overflow: hidden;
				margin: 22rpx auto;
			}
			.bottominfo{
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 26rpx;
			}
		}
		.exponentinformation{
			display: flex;
			justify-content: space-between;
			margin-top: 35rpx;
			.info{
				width: 330rpx;
				padding: 21rpx;
				.title{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-weight: bold;
					font-size: 32rpx;
					color: #262626;
					margin-bottom: 15rpx;
					image{
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
				}
				.titleinfo{
					font-weight: 500;
					font-size: 28rpx;
					color: #262626;
					line-height: 42rpx;
				}
				.otherinfo{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					line-height: 42rpx;
				}
			}
			.left{
				background: rgba(15, 62, 170, 0.05);
				border-radius: 10rpx;
			}
			.right{
				background: rgba(254, 163, 48, 0.05);
				border-radius: 10rpx;
			}
		}
	}
	.information{
		padding: 22rpx 33rpx 22rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				font-weight: bold;
				font-size: 32rpx;
				color: #262626;
				line-height: 42rpx;
				font-style: italic;
			}
			.right{
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 42rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		.list{
			margin-bottom: 20rpx;
			.new{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-top: 30rpx;
				.index{
					width: 40rpx;
					height: 36rpx;
					border-radius: 6rpx;
					text-align: center;
					font-weight: bold;
					font-size: 24rpx;
					font-style: italic;
					color: #999999;
					margin-right: 15rpx;
				}
				.title{
					width: 616rpx;
					overflow: hidden;
				}
			}
			.new:nth-child(1) .index{
				color: #EA0E00;
				background-color: rgba(234, 14, 0, 0.05);
			}
			.new:nth-child(2) .index{
				color: rgba(239, 151, 31, 1);
				background-color: rgba(239, 151, 31, 0.05);
			}
			.new:nth-child(3) .index{
				color: rgba(250, 207, 23, 1);
				background-color: rgba(250, 207, 23, 0.05);
			}
		}
	}
	.empty{
		width: 100%;
		height: 50rpx;
	}
	.search{
		width: 100%;
		height: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.action{
			width: 100%;
			height: 44px;
			height: calc(44px + constant(safe-area-inset-top));
			height: calc(44px + env(safe-area-inset-top));
			padding: 7px 3px;
			padding-top: calc(7px + constant(safe-area-inset-top));
			padding-top: calc(7px + env(safe-area-inset-top));
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 18rpx;
			
			.left{
				margin-right: 15rpx;
				image{
					width: 57rpx;
					height: 57rpx;
				}
			}
			
			.center{
				flex: 1;
				height: 59rpx;
				text-align: center;
				position: relative;
				top: 0rpx;
				.uni-searchbar{
					padding: 0;
				}
			}
		}
		.resultlist{
			.result{
				height: 106rpx;
				padding: 0 33rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #E5E5E5;
				.left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: 20rpx;
					.label{
						width: 72rpx;
						height: 36rpx;
						background: linear-gradient(90deg, #004EC2, #08377D);
						border-radius: 18rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 36rpx;
					}
					.info{
						font-size: 28rpx;
						color: #262626;
						.subtitle{
							font-size: 24rpx;
							color: #262626;
						}
					}
				}
			}
		}
	}
</style>
